<%@ page contentType="text/html;charset=UTF-8" language="java"%>
<%@page import="dashboard.User"%>
<%@page import="dashboard.CourseRegistry"%>
<%@page import="dashboard.Course"%>
<%@page import="dashboard.Milestone"%>
<%@page import="java.util.*"%>
<!DOCTYPE html>
<html>
<!--Milestones-->
<head>
<title>Milestones</title>

</head>
<script type="text/javascript">
function check(name)
{
	var elem1 = document.getElementById(name);
	if(elem1.checked)
		elem1.checked = false;
	else
	 	elem1.checked = true;
}
function validate(evt) {
	  if(evt.keyCode != 46 && evt.keyCode != 8 && evt.keyCode != 9 && evt.keyCode != 27 && evt.keyCode != 13 )
		  {
			  var theEvent = evt || window.event;
			  var key = theEvent.keyCode || theEvent.which;
			  key = String.fromCharCode( key );
			  var regex = /[0-9]|\./;
			  if( !regex.test(key) ) {
			    theEvent.returnValue = false;
			    if(theEvent.preventDefault) theEvent.preventDefault();
			  }
		  }
	}
</script>
<body>

	<div id="main">
		<%@include file="header.jsp"%>
		<div id="container">
			<%
			if (session.getAttribute("user") == null)
			{
				response.sendRedirect("login.jsp");
			}
			else {
	
			Milestone m = (Milestone) session.getAttribute("cMilestone");
			User currentUser1 = (User) session.getAttribute("user");
			currentUser = UserRegistry.getInstance().getUserById(
					currentUser1.getId());
			List<String> errors = (List<String>) session.getAttribute("errors");
			if (errors != null && errors.size() != 0) {
		%>

			<div id=error>
				<p class="warning">
					An error occurred:
					<%
				for (String error : errors) {
			%><%=error%><br>
					<%
					}
				%>
				</p>
			</div>
			<%
			session.setAttribute("errors", null);
			}
		%>

			<%
				boolean pages = false;
				ArrayList<String> types1 = new ArrayList<String>();
				currentUser = (User) session.getAttribute("user");
				if (currentUser != null) {
					if (request.getParameter("action") == null) {
			%>
			<form class="button" name="aanmaken" method="post"
				action="milestone.jsp?action=add">
				<input style="width: 100%;" type="submit" value="Add milestone">
			</form>

			<form class="button" name="bekijken" method="post"
				action="milestone.jsp?action=view">
				<input style="width: 100%;" type="submit" value="View milestones">
			</form>

			<br> <br>

			<form class="button" name="terug" method="post"
				action="dashboard.jsp">
				<input type="submit" value="Back" onclick="dashboard.jsp"
					style="width: 100%;">
			</form>

			<%
				} else if (request.getParameter("action").equals("add")) {
			%>
			<p>Select the course you want to make a milestone for.</p>
			<form class="button" name="course" method="post"
				action="Milestones?action=courseSelection">

				<%
					List<Long> courses = currentUser.getCourses();
							if (!courses.isEmpty()) {
				%>
				<select name="course" class="mobileStyle">
					<%
						for (long courseId : courses) {
										String courseName = CourseRegistry.getInstance()
												.getCourseName(courseId);
					%>
					<option value="<%=courseId%>"><%=courseName%></option>
					<%
						}
									if (courses.size() > 1) {
					%>
					<option>All courses</option>
					<%
						}
					%>
				</select> <br> <br> <input type="submit" value="Continue"
					onclick="" style="width: 100%;">
			</form>
			<%
				}
					} else if (request.getParameter("action").equals("type")) {
						session.setAttribute("course",
								request.getParameter("course"));
			%>
			<form method="post" action="Milestones?action=typeSelection"
				class="button">
				<table class='tablesorter' id='LinkTable' width='97%'>
					<tbody>
						<tr>
							<td class="tb3" style="width: 100%;" onclick="check('ch1');">
								<input type="checkbox" name="type" value="Lecture" id="ch1">Lectures
							</td>
						</tr>
						<tr>
							<td class="tb3" style="width: 100%;" onclick="check('ch2');">
								<input type="checkbox" name="type" value="Worksession" id="ch2"
								onclick="">Work sessions
							</td>
						</tr>
						<tr>
							<td class="tb3" style="width: 100%;" onclick="check('ch3');">
								<input type="checkbox" name="type" value="Studying" id="ch3">Studying
							</td>
						</tr>
					</tbody>
				</table>
				<br> <input type="submit" value="Continue" onclick=""
					style="width: 100%;">
			</form>

			<br>
			<form class="button" method="post" action="milestone.jsp?action=add">
				<input type="submit" value="Back" onclick="milestone.jsp?action=add"
					style="width: 100%;">
			</form>
			<%
				} else if (request.getParameter("action").equals("date")) {
			%>
			<p>The dates must be in the format: DD-MM-YYYY </p>
			<p>If you want to start your milestone now, then leave the start date empty.</p>
			<form method="post" action="Milestones?action=dateSelection"
				class="button">
				Start date: <br> <input type="date" name="start"
					class="mobileStyle"> <br> End date: <br> <input
					type="date" name="stop" class="mobileStyle"> <br> <br>
				<input type="submit" value="Continue" onclick=""
					style="width: 100%;">
			</form>

			<br>
			<form class="button" method="post" action="milestone.jsp?action=type">
				<input type="submit" value="Back"
					onclick="milestone.jsp?action=type" style="width: 100%;">
			</form>
			<%
				} else if (request.getParameter("action").equals("goal")) {
						String course = "";
						if (m.getCourses().size() > 1)
							course = "All courses";
						else
							course = CourseRegistry.getInstance().getCourseName(
									m.getCourses().get(0));
			%>

			<p>
				Complete the number of hours you want to do for
				<%=course%>.
			</p>
			<form method="post" action="Milestones?action=goalSelection"
				class="button">
				Number of hours/pages: <br> <input type="text" name="goal"
					placeholder="A number please." class="mobileStyle"
					onkeypress='validate(event)'> <br> <select name="act"
					class="mobileStyle">
					<%
						if (m.getTypes().contains("Studying")
										&& m.getTypes().size() == 1) {
					%>
					<option value="Pages">Pages</option>
					<%
						}
					%>
					<option value="Hours">Hours</option>
				</select> <br> <br> <input class="button" type="submit"
					value="Continue" onclick="">
			</form>

			<br>
			<form class="button" method="post" action="milestone.jsp?action=date">
				<input type="submit" value="Back"
					onclick="milestone.jsp?action=date" style="width: 100%;">
			</form>
			<%
				} else if (request.getParameter("action").equals("pages")) {
			%>
			<p>
				Complete the number of pages you want to study for
				<%=session.getAttribute("course")%>.
			</p>
			<form class="button" method="post"
				action="milestone.jsp?action=confirmation">
				Number of pages: <input class="mobileStyle" type="text" name="goal"
					placeholder="A number please."> <br> <br> <input
					style="width: 100%;" type="submit" value="Continue">
			</form>

			<br>

			<form class="button" method="post" action="milestone.jsp?action=goal">
				<input type="submit" value="Back" style="width: 100%;">
			</form>
			<%
				pages = true;
					} else if (request.getParameter("action").equals("hours")) {
			%>
			<p>
				Complete the number of hours you want to do for
				<%=session.getAttribute("course")%>.
			</p>
			<form method="post" action="milestone.jsp?action=confirmation">
				Number of hours: <input type="text" name="goal"
					placeholder="A number please."><br> <input
					class="button" type="submit" value="Continue" onclick="">
			</form>

			<br>
			<form class="button" method="post" action="milestone.jsp?action=date">
				<input type="submit" value="Back"
					onclick="milestone.jsp?action=date">
			</form>
			<%
				} else if (request.getParameter("action")
							.equals("confirmation")) {

						String course = "";
						if (m.getCourses().size() > 1)
							course = "All courses";
						else
							course = CourseRegistry.getInstance().getCourseName(
									m.getCourses().get(0));
			%>
			Do you want to make a Milestone with the following information? <br>
			<br>
			<table>
				<tbody>
					<tr>
						<td style="width: 150px;">Course:</td>
						<td><%=course%></td>
					</tr>
					<tr>
						<td>Start:</td>
						<td><%=m.getStart().toString()%></td>
					</tr>
					<tr>
						<td>End:</td>
						<td><%=m.getEnd().toString()%></td>
					</tr>
					<tr>
						<td>Goal:</td>
						<td><%=Math.round(m.getGoal())%> <%=m.getAction()%></td>
					</tr>
				</tbody>
			</table>



			<br>

			<form class="button" method="post" action="Milestones?action=create">
				<input type="submit" value="Confirm Milestone" style="width: 100%;">
			</form>

			<form class="button" method="post"
				action="milestone.jsp?action=cancel">
				<input type="submit" value="Cancel" style="width: 100%;">
			</form>
			<br>
			<form class="button" method="post" action="milestone.jsp?action=goal">
				<input type="submit" value="Back" style="width: 100%;">
			</form>

			<%
				} else if (request.getParameter("action").equals("cancel")) {
			%>
			<p>Are you sure you want to cancel the milestone?</p>

			<form class="button" method="post" action="Milestones?action=clear">
				<input type="submit" value="Yes">
			</form>

			<form class="button" method="post"
				action="milestone.jsp?action=confirmation">
				<input type="submit" value="No"
					onclick="milestone.jsp?action=confirmation">
			</form>
			<%
				} else if (request.getParameter("action").equals("view")) {
			%>

<fieldset>
			<legend> Your Milestones </legend> 
			
			
			<table class='tablesorter' id='LinkTable' width='97%'>
				<thead>
					<tr>
						<th colspan="1">Course</th>
						<th colspan='1'>Goal</th>
						<th colspan='1'>Type</th>
						<th colspan='1' style="width: 200px;">Time</th>
						<th colspan='1' style="width: 200px;">Progress</th>
					</tr>
				</thead>
				<tbody>
					<%
							List<Milestone> milestones = currentUser.getMilestones();
								if (milestones.size() == 0) {
						%>
					
					<tr>
						<td style="font-size: 20px; text-align: center;">You have no
							milestones.</td>
					</tr>
					<%
							}
									for (Milestone mi : milestones) {
										String courses = "";
										String types = "";
										if (mi.getCourses().size() == 1)
											courses = CourseRegistry.getInstance()
													.getCourseById(mi.getCourses().get(0))
													.getCourseName();
										else
											courses = "All courses";

										for (String st : mi.getTypes())
											types += " " + st;
						%>
					<tr>
						<td><%=courses%></td>

						<td><%=mi.getGoal()%> <%=mi.getAction()%></td>

						<td><%=mi.getTypes()%></td>
						<% if(Statistics.getProgressMilestoneTime(mi) ==-1) {%>
						<td colspan="2" style="text-align: center;">Not Started</td>
						<% } else if( Statistics.getProgressMilestoneTime(mi) >= 100 || Statistics.getProgressMilestone(mi, currentUser) >= 100){ %>
						<td colspan="2" style="text-align: center;">Finished</td>
						<% } else { %>
						<td style="padding: 0px; border: 1px solid #aed0ea; height: 50px;"
							title="<%=Statistics.getProgressMilestoneTime(mi)%>%">
							<div
								style="padding: 0px; width: <%=Statistics.getProgressMilestoneTime(mi)%>%; background-color: #aed0ea; height: 100%;"></div>
						</td>
						<td style="padding: 0px; border: 1px solid #aed0ea; height: 50px;"
							title="<%=Statistics.getProgressMilestone(mi, currentUser)%>%">
							<div
								style="padding: 0px; width: <%=Statistics.getProgressMilestone(mi, currentUser)%>%; background-color: #aed0ea; height: 100%;"></div>
						</td>
						<%	
							}
						%>
						<td class='tb3' style="font-size: 25px;"
							onclick="window.location='milestone.jsp?action=viewspecific&id=<%=mi.getId()%>'">...</td>
					</tr>
					<%	
							}
						%>
				</tbody>
			</table>

			<div class="button">
				<input type="submit" value="Back"
					onclick="window.location='milestone.jsp?action=viewStart'">
			</div>
			
			</fieldset>
			
			<%
					}
				 else if (request.getParameter("action").equals("cancel")) {
						%>
			<p>Are you sure you want to cancel the milestone?</p>

			<form class="button" method="post" action="Milestones?action=clear">
				<input type="submit" value="Yes">
			</form>

			<form class="button" method="post"
				action="milestone.jsp?action=confirmation">
				<input type="submit" value="No"
					onclick="milestone.jsp?action=confirmation">
			</form>
			<%
							} else if (request.getParameter("action").equals("viewStart")) {
								if(session.getAttribute("5milestones")==null){
									response.sendRedirect("Milestones?action=view");
								}else{
								
								
						%>

			<fieldset>
			<legend> Your milestones </legend>
			<table class='tablesorter' id='LinkTable' width='97%'>
				<thead>
					<tr>
						<th colspan="1">Course</th>
						<th colspan='1'>Goal</th>
						<th colspan='1'>Type</th>
						<th colspan='1' style="width: 200px;">Time</th>
						<th colspan='1' style="width: 200px;">Progress</th>
					</tr>
				</thead>
				<tbody>
					<%				List<Milestone> milestones = new ArrayList<Milestone>();
									milestones = (ArrayList<Milestone>) session.getAttribute("5milestones");
												if (milestones==null || milestones.size() == 0) {
									%>
					<tr>
						<td style="font-size: 20px; text-align: center;">You have no
							milestones that end in the future.</td>
					</tr>
					<%
										}
												int i = 0; 
												for(Milestone mi: milestones){
													String courses = "";
													i++;
													String types = "";
													if (mi.getCourses().size() == 1)
														courses = CourseRegistry.getInstance()
																.getCourseById(mi.getCourses().get(0))
																.getCourseName();
													else
														courses = "All courses";

													for (String st : mi.getTypes())
														types += " " + st;
									%>
					<tr>
						<td><%=courses%></td>

						<td><%=mi.getGoal()%> <%=mi.getAction()%></td>

						<td><%=mi.getTypes()%></td>
						<% if(Statistics.getProgressMilestoneTime(mi) ==-1) {%>
						<td colspan="2" style="text-align: center;">Not Started</td>
						<% } else if( Statistics.getProgressMilestoneTime(mi) >= 100 || Statistics.getProgressMilestone(mi, currentUser) >= 100){ %>
						<td colspan="2" style="text-align: center;">Finished</td>
						<% } else { %>
						<td style="padding: 0px; border: 1px solid #aed0ea; height: 50px;"
							title="<%=Statistics.getProgressMilestoneTime(mi)%>%">
							<div
								style="padding: 0px; width: <%=Statistics.getProgressMilestoneTime(mi)%>%; background-color: #aed0ea; height: 100%;"></div>
						</td>
						<td style="padding: 0px; border: 1px solid #aed0ea; height: 50px;"
							title="<%=Statistics.getProgressMilestone(mi, currentUser)%>%">
							<div
								style="padding: 0px; width: <%=Statistics.getProgressMilestone(mi, currentUser)%>%; background-color: #aed0ea; height: 100%;"></div>
						</td>
						<%	
										}
									%>
						<td class='tb3' style="font-size: 25px;"
							onclick="window.location='milestone.jsp?action=viewspecific&&id=<%=mi.getId()%>'">...</td>
					</tr>
					<%	
										}
									%>
				</tbody>
			</table>
			<div class="button">
				<input type="submit" value="View all your milestones!"
					onclick="window.location='milestone.jsp?action=view'" input style="width: 100%">
			</div>
			
			<br>
			
			<div class="button">
				<input type="submit" value="Back"
					onclick="window.location='dashboard.jsp'">
			</div>
			
			</fieldset>
			
			<%
			session.removeAttribute("5milestones");
								} }
					else if (request.getParameter("action").equals("viewspecific") && request.getParameter("id")!=null) {
						long id=-1;
						try{
							id = Long.parseLong((String) request.getParameter("id"));
						}
						catch (NumberFormatException n){
							%>
			An error occured. (Not a valid id)
			<%
						}
						if(id!=-1){
						Milestone mi = currentUser.getMilestoneById(id);
							if(mi!=null){
							String course = "";
								if (mi.getCourses().size() > 1){
								course = "All courses";}
								else{
							course = CourseRegistry.getInstance().getCourseName(
									mi.getCourses().get(0));
								}
					%>
			<table class='tablesorter' id='LinkTable' width='97%'>
				<tbody>
					<tr>
						<td style="font-weight: bold;">Course:</td>
						<td><%=course%></td>
					</tr>
						<tr>
						<td style="font-weight: bold;">Type:</td>
						<td><%
						int i = 0;
						List<String> types = mi.getTypes();
						while(i!=types.size()){
							
						%>
						<%=types.get(i)%>
						<%
						if(types.size()!=i+1){
							%>,<%
						}
						i++;
						}%></td>
					</tr>
					<tr>
						<td style="font-weight: bold;">Start:</td>
						<td><%=mi.getStart().toString()%></td>
					</tr>
					<tr>
						<td style="font-weight: bold;">Stop:</td>
						<td><%=mi.getEnd().toString()%></td>
					</tr>
					<tr>
						<td style="font-weight: bold;">Goal:</td>
						<td><%=mi.getGoal()%> <%=mi.getAction()%></td>
					</tr>
					<% if(Statistics.getProgressMilestoneTime(mi) == -1) {%>
					<tr>
						<td style="font-weight: bold;">TimeProgress :</td>
						<td>Not Started</td>
					</tr>
					<tr>
						<td style="font-weight: bold;">Progress:</td>
						<td>Not Started</td>
					</tr>
					<% } else if( Statistics.getProgressMilestoneTime(mi) >= 100 || Statistics.getProgressMilestone(mi, currentUser) >= 100){
						double progress= Statistics.getProgressMilestone(mi, currentUser);
						if(progress>100){
							progress=100;
						}
						
						%>
					<tr>
						<td style="font-weight: bold;">TimeProgress :</td>
						<td>Finished</td>
					</tr>
					<tr>
						<td style="font-weight: bold;">Progress:</td>
						<td><%=progress %> %</td>
					</tr>
					<% } else { %>
					<tr>
						<td style="font-weight: bold;">TimeProgress :</td>
						<td style="padding: 0px; border: 1px solid #aed0ea; height: 50px;"
							title="<%=Statistics.getProgressMilestoneTime(mi)%>%">
							<div
								style="padding: 0px; width: <%=Statistics.getProgressMilestoneTime(mi)%>%; background-color: #aed0ea; height: 100%;"></div>
						</td>
					</tr>
					<tr>
						<td style="font-weight: bold;">Progress:</td>
						<td style="padding: 0px; border: 1px solid #aed0ea; height: 50px;"
							title="<%=Statistics.getProgressMilestone(mi, currentUser)%>%">
							<div
								style="padding: 0px; width: <%=Statistics.getProgressMilestone(mi, currentUser)%>%; background-color: #aed0ea; height: 100%;"></div>
						</td>
					</tr>
					<% } %>
				</tbody>
			</table>
			<div class="button">
				<input type="submit" value="Back"
					onclick="window.location='milestone.jsp?action=view'">
			</div>
			<% 
						}
					}
					}
					}
				}
				%>
		</div>
	</div>
</body>
</html>
